<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情</title>
    <link rel="shortcut icon" type="image/x-icon" href="../img/yitiao-icon.png">
    <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.7/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../css/footer-bar.css">
    <link rel="stylesheet" href="../css/find.css">
    <style>
        .text-container {
            margin: 10px;
        }
        .like {
            margin: 15px 5px;
        }
    </style>
</head>
<body>
<section>
    <div class="row">
        <div class="col-xs-12 tag-img-container">
            <img src="../img/particulars/top.png" alt="..." class="img-rounded tag-img">
        </div>
    </div>
    <div class="tag-container">
        <div class="row panel">
            <div class="col-xs-8 panel-bar">
                <img src="../img/follow/hp-sakuraGirl.jpeg" alt="..." class="img-circle user">
                <span class="username">sakura</span>
            </div>
            <div class="col-xs-3 panel-bar follow-bar">
                <span class="panel-follow">关注</span>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <p class="tag-title">
                    <strong>三十五度“灰”</strong>
                </p>
                <div class="text-container">
                    <p>
                        时尚永远在轮回。
                    </p>
                    <p>
                        配色方案永远没有尽头，灰色系配色通常会让人感觉舒服的柔和的，亦可以让人觉得很高级。高级灰让画面充满了宁静与沉稳。
                    </p>
                    <p>
                        灰色，在色彩学上，属于中间色，意思是它既非暖色又非冷色，而是介于二者之间的色调，对于中间色来说，在色彩搭配原则上，
                        是可以跟任何一种颜色进行搭配，灰色在设计师的眼里是最美丽、最神秘的颜色，它可以演绎丰富的层次感。
                    </p>
                    <div class="row">
                        <div class="col-xs-12 tag-img-container">
                            <img src="../img/particulars/girl.jpg" alt="..." class="img-rounded tag-img">
                        </div>
                    </div>
                    <br>
                    <p class="tag-text">
                        #编辑推荐&nbsp;&nbsp;#简约风格
                    </p>
                    <h6>评论&nbsp;&nbsp;2</h6>
                    <p>马小二：设计师们经常使用灰色混搭</p>
                    <p>tony：简约即美</p>
                    <br>
                    <h5 class="like">你可能也喜欢</h5>
                    <div class="jocelyn-class row">
                        <div class="jocelyn-class col-xs-6 col-md-4  external-border">
                            <div class="jocelyn-class thumbnail">
                                <img src="../img/follow/redCake.jpeg" alt="封面图片" class="jocelyn-class img-rounded">
                                <div class="jocelyn-class caption">
                                    <p class="jocelyn-class title-font">
                                        <strong>我在巴黎的几天~</strong>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="jocelyn-class col-xs-6 col-md-4  external-border">
                            <div class="jocelyn-class thumbnail">
                                <img src="../img/follow/travelBuilding.jpg" alt="封面图片" class="jocelyn-class img-rounded">
                                <div class="jocelyn-class caption">
                                    <p class="jocelyn-class title-font">
                                        <strong>看看外面的世界</strong>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<footer>
    <div id="footer-bar">
        <div class="item find">
            <a href="../index.html" style="text-decoration: none">
                <span class="footer-title"><i class="fa fa-angle-left fa-fw"></i>回到首页</span>
            </a>
        </div>
        <div class="item release">
            <span class="footer-title"><i class="fa fa-heart-o fa-fw"></i>18</span>

        </div>
        <div class="item release">
            <span class="footer-title"><i class="fa fa-commenting-o fa-fw"></i>3</span>

        </div>
        <div class="item home">
            <span class="footer-title"><i class="fa fa-external-link fa-fw"></i>44</span>

        </div>
    </div>
</footer>
</body>
<script src="../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/bootstrap-3.3.7/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/footer-bar.js"></script>
<script>
    $('.thumbnail').last().css('margin-bottom', '50px');
</script>
</html>